
<div style="position:fixed;margin-bottom:10px;margin-left:10px;margin-right:10px;z-index:1000;background-color: #f2f2f2;"
     [style.width]="!(isHandset$ | async) ? 'calc(100vw - 220px)' : 'calc(100vw - 20px)'">

    <div style="display:flex;flex-direction: row;padding-top: 3px;">
      <div *ngIf="!view">
        <mat-icon style="padding-top: 3px;">add_circle</mat-icon>
        <h4 style="display: inline;position: relative;top: -5px;">
          <ng-container i18n="services.form.header.page.editService">
            {{ messages.services_form_header_page_editService }}
          </ng-container>
        </h4>
      </div>
      <div *ngIf="view">
        <mat-icon style="padding-top: 3px;">visibility</mat-icon>
        <h4 style="display: inline;position: relative;top: -5px;">
          <ng-container i18n>View Service</ng-container>
        </h4>
      </div>
    <div style="flex: 1 1 auto"></div>
    <div>
      <app-controls (save)="save()" [showEdit]="!view"></app-controls>
    </div>
</div>
  <mat-tab-group #tabGroup (selectedIndexChange)="goto($event)">
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Basics</ng-container>
      </ng-template>
    </mat-tab>
    <!--
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Service Type</ng-container>
      </ng-template>
    </mat-tab>
    -->
    <mat-tab *ngIf="isSaml() || isOauth() || isOidc() || isWsFed()">
      <ng-template mat-tab-label>
        <ng-container *ngIf="isSaml()" i18n>SAML2 SP</ng-container>
        <ng-container i18n *ngIf="isOauth()">OAuth2</ng-container>
        <ng-container *ngIf="isOidc()" i18n>OpenID Connect</ng-container>
        <ng-container *ngIf="isWsFed()" i18n>WS Federation</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <ng-container i18n>Contacts</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Logout</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Access Strategy</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <ng-container i18n>Expiration</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Multifactor Authentication</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Proxy Authentication</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Username Attribute</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Attribute Release</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Properties</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container>Advanced</ng-container>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>
<div style="padding-top:90px;padding-bottom:0px;display:flex;flex-direction: column; margin-right: auto; margin-left: auto;"
     [style.width]="!(isHandset$ | async) ? 'calc(100vw - 220px)' : 'calc(100vw - 20px)'">
  <router-outlet name="form"></router-outlet>
</div>
